<script setup>
import {onMounted, ref, watch} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import axios from "axios";

const router = useRouter();
const route=useRoute()

const categoryId=ref(route.query.categoryId);

watch(() => route.query.categoryId, (newValue) => {
  categoryId.value = newValue
  loadCategoryData(newValue)
})

const form = ref({})

const loadCategoryData = (categoryId) => {
  if (categoryId) {
    axios.get(`/category/getCategoryById/${categoryId}`).then((res) => {
      form.value =  {
        ...res.data,
        subCategories: Array.isArray(res.data.subCategories)
            ? res.data.subCategories
            : JSON.parse(res.data.subCategories || '[]')
      };
    }).catch(error => {
      console.error("加载品类数据失败", error)
    })
  }
}



// 返回上一页
const goBack = () => {
  router.go(-1);
};
onMounted(()=>{
  loadCategoryData(categoryId.value)
})
</script>

<template>
  <div class="view-category-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>医疗服务</el-breadcrumb-item>
        <el-breadcrumb-item>品类管理</el-breadcrumb-item>
        <el-breadcrumb-item>查看品类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 页面标题区域 -->
    <div class="header-section">
      <h2 class="page-title">查看品类</h2>
      <div class="divider"></div>
    </div>

    <!-- 品类信息卡片 -->
    <el-card class="category-card" v-if="form">
      <!-- 卡片头部 -->
      <div class="card-header">
        <h3 class="card-title">品类详细信息</h3>
      </div>

      <!-- 品类信息内容 -->
      <div class="card-content">
        <!-- 品类名称 -->
        <div class="info-item">
          <span class="label"><el-icon><Collection /></el-icon> 品类名称：</span>
          <span class="value">{{ form.categoryName || '—' }}</span>
        </div>

        <!-- 品类顺序 -->
        <div class="info-item">
          <span class="label"><el-icon><Sort /></el-icon> 品类顺序：</span>
          <span class="value">{{ form.sortOrder || '—' }}</span>
        </div>

        <!-- 子品类 -->
        <div class="info-item">
          <span class="label"><el-icon><Menu /></el-icon> 子品类：</span>
          <div class="subcategories">
            <el-tag
                v-for="(subcat, index) in form.subCategories"
                :key="index"
                class="subcategory-tag"
                type="info"
                effect="plain"
                round
            >
              {{ subcat }}
            </el-tag>
            <span v-if="!form.subCategories || form.subCategories.length === 0" class="empty-tip">暂无子品类</span>
          </div>
        </div>

        <!-- 品类描述 -->
        <div class="info-item description-item">
          <span class="label"><el-icon><Document /></el-icon> 品类描述：</span>
          <div class="description-content">
            <div v-if="form.description" class="description-text">
              {{ form.description }}
            </div>
            <div v-else class="empty-description">
              <el-icon><Warning /></el-icon>
              <span>暂无描述信息</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="card-footer">
        <el-button type="primary" @click="goBack" class="back-button">
          <el-icon><ArrowLeft /></el-icon>
          <span>返回列表</span>
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.view-category-container {
  padding: 24px;
  background-color: #f8fafc;
  min-height: calc(100vh - 48px);
}

/* 面包屑导航样式 */
.breadcrumb-container {
  padding: 12px 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.breadcrumb {
  font-size: 14px;
}

/* 页面标题区域 */
.header-section {
  margin-bottom: 24px;
}

.page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  position: relative;
  padding-bottom: 12px;
}

.divider {
  height: 3px;
  width: 60px;
  background: linear-gradient(90deg, #409eff, #c6e2ff);
  border-radius: 3px;
  margin-top: 8px;
}

/* 卡片样式 */
.category-card {
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  border: none;
}

.card-header {
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f2f5;
  margin-bottom: 20px;
}

.card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  display: flex;
  align-items: center;
}

.card-content {
  padding: 0 12px;
}

/* 信息项样式 */
.info-item {
  display: flex;
  margin-bottom: 24px;
  line-height: 1.6;
  align-items: flex-start;
}

.label {
  width: 140px;
  font-weight: 500;
  color: #606266;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.label i {
  margin-right: 8px;
  font-size: 16px;
  color: #409eff;
}

.value {
  flex: 1;
  color: #303133;
  font-size: 15px;
}

/* 子品类标签样式 */
.subcategories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.subcategory-tag {
  height: 28px;
  line-height: 28px;
  font-size: 13px;
  padding: 0 12px;
  border-radius: 14px;
}

.empty-tip {
  color: #909399;
  font-size: 14px;
}

/* 描述区域样式 */
.description-item {
  align-items: flex-start;
}

.description-content {
  flex: 1;
  padding: 12px;
  background-color: #f8fafc;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.description-text {
  white-space: pre-line;
  line-height: 1.8;
  color: #606266;
  font-size: 14px;
}

.empty-description {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 14px;
}

.empty-description i {
  margin-right: 8px;
  font-size: 16px;
  color: #e6a23c;
}

/* 底部按钮 */
.card-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px dashed #ebeef5;
  text-align: center;
}

.back-button {
  padding: 10px 24px;
  border-radius: 6px;
}

.back-button i {
  margin-right: 6px;
  font-size: 14px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .info-item {
    flex-direction: column;
    gap: 8px;
  }

  .label {
    width: 100%;
    justify-content: flex-start;
  }

  .value {
    width: 100%;
    padding-left: 24px;
  }
}
</style>